<template>
  <div>
    <div class="navBarClass">
      <van-nav-bar title="网易严选" left-text="返回" left-arrow>
        <template #left>
          <van-icon name="wap-home-o" size="30" @click="gotoHome" />
        </template>

        <template #right>
          <van-icon name="shopping-cart-o" size="30" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 中间的图标 -->
    <div class="logoWrap">
      <img src="//yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png" />
    </div>
    <!-- 登录按钮 -->
    <div class="btnWrap">
      <van-button
        class="van_button"
        :icon="login_icon"
        color="#DD1A21"
        type="primary"
        plain
        block
        @click="loginBtnEvent"
      >
        邮箱帐号登录
      </van-button>
    </div>
    <div class="btnWrap">
      <van-button
        class="van_button1"
        :icon="login_icon"
        color="#fff"
        type="primary"
        plain
        block
        @click="registerBtnEvent"
      >
        用户注册
      </van-button>
      <span>其它登录方式 > </span>
    </div>
    <div class="title_div1" v-show="loginWrap_show">
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field v-model="email" type="text" label="邮箱" />
      <!-- 输入密码 -->
      <van-field v-model="password" type="password" label="密码" />
      <van-button class="loginBtn" type="default" size="mini" @click="loginFn">
        登录
      </van-button>
    </div>
    <div class="title_div1" v-show="registerWrap_show">
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field v-model="user" type="text" label="用户名" />
      <!-- 输入密码 -->
      <van-field v-model="reg_password" type="password" label="注册密码" />
      <van-button
        class="loginBtn"
        type="default"
        size="mini"
        @click="registerFn"
      >
        注册
      </van-button>
    </div>
    <footer_bar></footer_bar>
  </div>
</template>
<script>
import { Dialog } from "vant";
import footer_bar from "./footer_bar.vue";
import login_icon from "../assets/login_icon.png";
export default {
  name: "login",
  data() {
    return {
      login_icon: login_icon,
      loginWrap_show: false,
      registerWrap_show: false,
      email: "",
      password: "",
      user: "",
      reg_password: "",
      reArrObj: [],
      saveUserArr: [],
    };
  },
  components: { footer_bar },
  mounted() {
    let regObj = localStorage.getItem("reArrObj");
    // console.log(JSON.parse(regObj));
    this.saveUserArr = JSON.parse(regObj);
  },
  methods: {
    gotoHome() {
      this.$router.go(-1);
    },
    loginBtnEvent() {
      this.registerWrap_show = false;

      this.loginWrap_show = true;
    },
    registerBtnEvent() {
      this.loginWrap_show = false;

      this.registerWrap_show = true;
    },
    loginFn() {
      for (let i = 0; i < this.saveUserArr.length; i++) {
        if (
          this.saveUserArr[i].u === this.email &&
          this.saveUserArr[i].p === this.password
        ) {
          Dialog({ message: "登录成功" });
          this.$router.push("/");
          break;
        } else {
          Dialog({ message: "用户名或密码错误" });
        }
      }
    },
    registerFn() {
      let regObj = {
        u: this.user,
        p: this.reg_password,
      };
      this.reArrObj.push(regObj);
      localStorage.setItem("reArrObj", JSON.stringify(this.reArrObj));
      this.user = "";
      this.reg_password = "";
      Dialog({ message: "注册成功" });
    },
  },
};
</script>
<style scoped>
.logoWrap {
  text-align: center;
  padding-top: 2.13333rem;
  padding-bottom: 3.09333rem;
}
.logoWrap img {
  width: 3.57333rem;
  height: 1.2rem;
}

.btnWrap {
  padding: 0 0.53333rem;
  margin-bottom: 2.73333rem;
}
.van_button {
  height: 1.3rem;
}
.van_button1 {
  height: 1.3rem;
  background-color: #dd1a21;
}
.btnWrap {
  margin-bottom: 0.5rem;
}
.btnWrap span {
  text-align: center;
  display: block;
  font-size: 0.37333rem;
  /* margin-top: 0.5rem; */
}
.title_div1 {
  padding: 0.23rem 0 0.23rem 0;
}
.loginBtn {
  width: 0.98667rem;
  height: 0.53333rem;
  font-size: 0.4rem;
  line-height: 0.53333rem;
  text-align: center;
  border: 0;
  border-radius: 0.10667rem;
  background: #fff;
  margin: 0.1rem 0 0 4.5rem;
}
</style>